@use '_values/colors';
@use '_utils';

.icon {
	font-size: 6px;
	color: colors.$success;
}

.chevron {
	font-size: 11px;
}

.popup {
	position: absolute;
	background: colors.$gray-100;
	border-radius: 6px;
	padding: 10px 12px;
	z-index: 999;
	max-width: 55%;
	top: 0;
	left: 0;
}

.popup-content {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

.popup-arrow {
	position: absolute;
	z-index: -1;
	top: -6px;

	&::before {
		content: '';
		background: colors.$gray-100;
		transform: rotate(45deg);
		height: 12px;
		width: 12px;
		display: block;
	}
}

.origin-container {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.favicon {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background-color: colors.$gray-85;
	margin-right: 8px;
	padding: 2px;
}

.origin-text {
	@include utils.overflow-ellipsis;
	@include utils.typography('Primary/SubtitleSmall-M');

	color: white;
}

.origin-url {
	@include utils.typography('Primary/BodySmall-SB');
}

.divider {
	height: 1px;
	background-color: colors.$gray-90;
	margin: 8px 0;
	align-self: stretch;
}

.disconnect {
	background: none;
	outline: none;
	border: none;
	color: colors.$issue;
	cursor: pointer;

	@include utils.typography('Primary/BodySmall-M');
}
